از Select URL API برای استفاده از فضای ذخیرهسازی مشترک استفاده کنید تا مشخص کنید کاربر چه خلاقیتی را در سایتها میبیند.
یک تبلیغکننده یا یک تولیدکننده محتوا ممکن است بخواهد استراتژیهای مختلف چرخش محتوا را برای یک کمپین اعمال کند و محتوا یا خلاقیتها را برای افزایش اثربخشی بچرخاند. از Select URL API میتوان برای اجرای استراتژیهای چرخش مختلف، مانند چرخش متوالی و چرخش با توزیع یکنواخت، در سایتهای مختلف استفاده کرد.
با چرخش خلاقانه Select URL API، میتوانید دادههایی مانند شناسه خلاقیت، تعداد بازدیدها و تعامل کاربر را ذخیره کنید تا مشخص کنید کاربران خلاق در سایتهای مختلف کدام یک را میبینند.
برای اطلاعات بیشتر در مورد API اساسی و نحوه عملکرد انتخاب، مستندات Select URL API را کاوش کنید .
چرخش خلاقانه را امتحان کنید
برای آزمایش چرخش خلاق، مطمئن شوید که Select URL API و Shared Storage فعال هستند:
- در
chrome://settings/content/siteData
،Allow sites to save data on your device
یاDelete data sites have saved to your device when you close all windows
انتخاب کنید. - در
chrome://settings/adPrivacy/sites
،Site-suggested ads
انتخاب کنید.
نسخه نمایشی زنده ذخیرهسازی مشترک ما را برای نسخه زنده نمونههای کد موجود در این سند امتحان کنید.
نسخه ی نمایشی با نمونه کد
در این مثال:
creative-rotation.js
اسکریپت شخص ثالثی است که محتوایی را که باید چرخانده شود، به همراه هر داده ای که محتوای بعدی را برای انتخاب و نمایش تعیین می کند، مانند وزن ها در این مثال، تعریف می کند. صفحه ناشر این اسکریپت را اجرا می کند. این اسکریپت Worklet ذخیرهسازی مشترک را فراخوانی میکند تا مشخص کند کدام محتوا را بر اساس دادههای موجود در فضای ذخیرهسازی و فهرست URLهای انتخابی نمایش میدهد.creative-rotation-worklet.js
Worklet ذخیره سازی مشترک شخص ثالث است که استراتژی چرخش را جستجو می کند، محتوای بعدی را محاسبه می کند و آن قطعه از محتوا را برمی گرداند.
نحوه عملکرد نسخه ی نمایشی
- وقتی کاربر از صفحه ناشر بازدید می کند، صفحه اسکریپت
creative-rotation.js
شخص ثالث را بارگیری می کند. اسکریپت چرخش خلاق مسئول بارگیری و اجرای Worklet ذخیره سازی مشترک است. این اسکریپت تماس Worklet را با لیستی از URL ها برای انتخاب فراهم می کند. - در ورکلت، اگر فضای ذخیرهسازی مشترک هنوز راهاندازی نشده باشد، فضای ذخیرهسازی با استراتژی چرخش خلاق اولیه و شاخص خلاقیت مقداردهی اولیه میشود. استراتژی چرخش اولیه استفاده شده در این دمو، استراتژی متوالی است.
- Worklet حالت چرخش را از فضای ذخیرهسازی مشترک میخواند و فهرست آگهی بعدی را برمیگرداند. در مورد حالت چرخش متوالی، همچنین فهرست خلاق در فضای ذخیرهسازی مشترک را با مقدار جدیدی که برای تماس بعدی استفاده میشود، بهروزرسانی میکند. Worklet یک
FencedFrameConfig
یا شی URN غیرشفاف را بر اساس مقدارresolveToConfig
که هنگام فراخوانیselectURL
استفاده میشود، برمیگرداند. - اسکریپت چرخش خلاق، تبلیغ انتخاب شده را در یک قاب حصاردار یا iframe نمایش می دهد. برای جزئیات بیشتر در مورد انواع بازگشت، به رندر سند آگهی مراجعه کنید.
- هنگامی که کاربر حالت چرخش را تغییر میدهد، Worklet ذخیرهسازی مشترک مقدار حالت چرخش خلاق ذخیره شده در فضای ذخیرهسازی مشترک را بهروزرسانی میکند.
- هنگام بارگیری مجدد صفحه ناشر، مراحل 1-4 تکرار می شود تا انتخاب آگهی بعدی بر اساس استراتژی چرخش انتخابی مشاهده شود.
نمونه کد
در زیر نمونه کد برای creative-rotation.js و creative-rotation-worklet.js آمده است.
const contentProducerUrl = 'https://your-server.example';
// Ad config with the URL of the ad, a probability weight for rotation, and the clickthrough rate.
const DEMO_AD_CONFIG = [
{
url: `${contentProducerUrl}/ads/ad-1.html`,
weight: 0.7,
},
{
url: `${contentProducerUrl}/ads/ad-2.html`,
weight: 0.2,
},
{
url: `${contentProducerUrl}/ads/ad-3.html`,
weight: 0.1,
},
];
async function setRotationMode(rotationMode) {
// Load the worklet module
const creativeRotationWorklet = await window.sharedStorage.createWorklet(
`${contentProducerUrl}/url-selection/creative-rotation-worklet.js`,
{ dataOrigin: 'script-origin' }
);
await creativeRotationWorklet.run('set-rotation-mode', {
data: { rotationMode }
});
console.log(`creative rotation mode set to ${rotationMode}`);
}
async function injectAd() {
// Load the worklet module
const creativeRotationWorklet = await window.sharedStorage.createWorklet(
`${contentProducerUrl}/url-selection/creative-rotation-worklet.js`,
{ dataOrigin: 'script-origin' }
);
const urls = DEMO_AD_CONFIG.map(({ url }) => ({ url }));
// Resolve the selectURL call to a fenced frame config only when it exists on the page
const resolveToConfig = typeof window.FencedFrameConfig !== 'undefined';
// Run the URL selection operation to determine the next ad that should be rendered
const selectedUrl = await creativeRotationWorklet.selectURL('creative-rotation', urls, {
data: DEMO_AD_CONFIG,
resolveToConfig
});
const adSlot = document.getElementById('ad-slot');
if (resolveToConfig && selectedUrl instanceof FencedFrameConfig) {
adSlot.config = selectedUrl;
} else {
adSlot.src = selectedUrl;
}
}
injectAd();
class SelectURLOperation {
async run(urls, data) {
// Initially set the storage to sequential mode for the demo
await SelectURLOperation.seedStorage();
// Read the rotation mode from Shared Storage
const rotationMode = await sharedStorage.get('creative-rotation-mode');
// Generate a random number to be used for rotation
const randomNumber = Math.random();
let index;
switch (rotationMode) {
/**
* Sequential rotation
* - Rotates the creatives in order
* - Example: A -> B -> C -> A ...
*/
case 'sequential':
const currentIndex = await sharedStorage.get('creative-rotation-index');
index = parseInt(currentIndex, 10);
const nextIndex = (index + 1) % urls.length;
console.log(`index = ${index} / next index = ${nextIndex}`);
await sharedStorage.set('creative-rotation-index', nextIndex.toString());
break;
/**
* Evenly-distributed rotation
* - Rotates the creatives with equal probability
* - Example: A=33% / B=33% / C=33%
*/
case 'even-distribution':
index = Math.floor(randomNumber * urls.length);
break;
/**
* Weighted rotation
* - Rotates the creatives with weighted probability
* - Example: A=70% / B=20% / C=10%
*/
case 'weighted-distribution':
console.log('data = ', JSON.stringify(data));
// Find the first URL where the cumnulative sum of the weights
// exceed the random number. The array is sorted by the weight
// in descending order.
let weightSum = 0;
const { url } = data
.sort((a, b) => b.weight - a.weight)
.find(({ weight }) => {
weightSum += weight;
return weightSum > randomNumber;
});
index = urls.indexOf(url);
break;
default:
index = 0;
}
console.log(JSON.stringify({ index, randomNumber, rotationMode }));
return index;
}
// Set the mode to sequential and set the starting index to 0.
static async seedStorage() {
await sharedStorage.set('creative-rotation-mode', 'sequential', {
ignoreIfPresent: true,
});
await sharedStorage.set('creative-rotation-index', 0, {
ignoreIfPresent: true,
});
}
}
class SetRotationModeOperation {
async run({ rotationMode }) {
await sharedStorage.set('creative-rotation-mode', rotationMode);
}
}
// Register the operation as 'creative-rotation'
register('creative-rotation', SelectURLOperation);
register('set-rotation-mode', SetRotationModeOperation);
پیاده روی با تصاویر
برای دسترسی به چرخش خلاقیت ها با استفاده از Select URL API و ذخیره سازی اشتراکی، به https://shared-storage-demo.web.app/ بروید. نسخه ی نمایشی "چرخش خلاق" را انتخاب کنید.
برای کشف نسخه ی نمایشی به عنوان "ناشر A" انتخاب کنید. شما به https://shared-storage-demo-publisher-a.web.app/creative-rotation هدایت خواهید شد. صفحه محتوای شماره گذاری شده را بر اساس داده های چرخش خلاق ذخیره شده در فضای ذخیره سازی مشترک بارگیری می کند که از طریق انتخاب URL API قابل دسترسی است. حالتهای نمایشی برای چرخش خلاقانه، توزیع متوالی، یکنواخت و توزیع وزنی هستند. Worklet منطقی را برای انتخاب محتوایی که در iframe ظاهر می شود اجرا می کند. تصویر زیر صفحه ناشر را نشان می دهد.
یک اسکرین شات صفحه ناشر A را با تصویری از شماره 1 نشان می دهد و کنترل هایی برای انتخاب استراتژی های چرخش خلاقانه دارد. برای مشاهده آنچه در فضای ذخیرهسازی مشترک ذخیره شده است، به Application -> Shared Storage در Chrome DevTools بروید. Two entries are created for shared storage. یک فضای ذخیره خالی برای https://shared-storage-demo-publisher-a.web.app مبدا در دسترس است. این شامل فضای ذخیرهسازی مختص آن مبدا خواهد بود و برای نسخه نمایشی ما خالی میماند زیرا ناشر نیازی به نوشتن در فضای ذخیرهسازی مشترک ندارد. توجه داشته باشید که وقتی بعداً برای نسخه نمایشی از آن صفحه بازدید کنید، فضای ذخیرهسازی مشابهی برای ناشر B ایجاد میشود.
Chrome DevTools فضای ذخیرهسازی مشترک خالی را برای ناشر A نشان میدهد. یکی دیگر از ورودیهای ذخیرهسازی مشترک برای مبدا https://shared-storage-demo-content-producer.web.app ایجاد خواهد شد. این محل ذخیره iframe شخص ثالث است که در صفحه ناشر تعبیه شده است. این فضای ذخیرهسازی برای به اشتراک گذاشتن دادهها بین دو ناشر موجود برای هماهنگی انتخاب خلاقانه استفاده خواهد شد. این فضای ذخیره سازی مشترک برای ذخیره اطلاعات مربوط به استراتژی خلاقیت و چرخش نشان داده شده با ذخیره دو جفت کلید-مقدار استفاده خواهد شد. اولین کلیدی که در نسخه آزمایشی استفاده میشود
creative-rotation-index
است که مقدار آن شاخص خلاق فعلی در حالت متوالی است. کلید دومcreative-rotation-mode
است که استراتژی چرخش مورد استفاده را دیکته می کند.یک عکس صفحهنمایش فضای ذخیرهسازی مشترک Chrome DevTools را با دو جفت کلید-مقدار نشان میدهد: creative-rotation-index: 1 و creative-rotation-mode: "sequential". بازخوانی صفحه در حالت متوالی منجر به نمایش خلاقیت بعدی در دنباله 1، 2، 3، 1، ... می شود، مقدار کلید creative-rotation-index با توجه به شاخص خلاقیت نشان داده شده در حالت متوالی تغییر می کند.
اسکرین شات صفحه وب ناشر A و DevTools را نشان می دهد. خلاقیت نشان داده شده 2، خلاقیت-rotation-mode متوالی است، و creative-rotation-index 2 است. تغییر حالت چرخش خلاق با استفاده از دکمههای کنترلی، مقدار حالت چرخش خلاق کلید را در استراتژی مربوطه بهروزرسانی میکند. این توسط کد Worklet برای انتخاب خلاقیت بعدی برای نمایش در iframe استفاده می شود. توجه داشته باشید که مقدار ذخیره شده برای creative-rotation-index برای حالت های چرخش غیر از ترتیبی تغییر نمی کند.
اسکرین شات صفحه وب ناشر A و DevTools را نشان می دهد. خلاقیت نشان داده شده 1 است، خلاقیت-rotation-mode توزیع وزنی است، و creative-rotation-index 2 است (استفاده نشده). به صفحه «ناشر B» در https://shared-storage-demo-publisher-b.web.app/creative-rotation بروید. در حالت متوالی، خلاقیت نشان داده شده باید خلاقیت بعدی در ترتیب نشان داده شده هنگام بازدید از URL برای "ناشر A" باشد. با بررسی فضای ذخیرهسازی مشترک برای تولیدکننده محتوا، میتوانید متوجه شوید که «ناشر A» و «ناشر B» فضای ذخیرهسازی یکسانی دارند و از تنظیمات آنجا برای انتخاب خلاقیت بعدی برای نمایش و استراتژی چرخش برای استفاده استفاده میکنند.
صفحه وب ناشر B و Devtools. خلاقیت ذخیرهسازی مشترک 3، شاخص چرخش خلاقانه 3، و حالت چرخش خلاق متوالی است. فضای ذخیرهسازی مشترک «ناشر B»، مشابه فضای ذخیرهسازی مشترک «ناشر A» خالی است.
Chrome DevTools فضای خالی مشترک برای ناشر B را نشان می دهد.
موارد استفاده کنید
همه موارد استفاده موجود برای Select URL API را میتوانید در این بخش پیدا کنید. با دریافت بازخورد و کشف موارد آزمایشی جدید، به افزودن نمونهها ادامه خواهیم داد.
- چرخاندن خلاقیتهای تبلیغاتی : دادههایی مانند شناسه خلاق و تعامل کاربر را ذخیره کنید تا مشخص کنید کاربران خلاق کدام یک را در سایتهای مختلف میبینند.
- انتخاب خلاقیت های تبلیغاتی بر اساس فراوانی : از داده های تعداد بازدید برای تعیین اینکه کاربران خلاق در سایت های مختلف می بینند استفاده کنید.
- اجرای تست A/B : میتوانید کاربر را به یک گروه آزمایشی اختصاص دهید، سپس آن گروه را در فضای ذخیرهسازی مشترک ذخیره کنید تا از طریق سایت به آن دسترسی داشته باشید.
- سفارشی کردن تجربه برای مشتریان شناخته شده : محتوای سفارشی و فراخوان برای اقدام را بر اساس وضعیت ثبت نام کاربر یا سایر وضعیت های کاربر به اشتراک بگذارید.
مشارکت کنید و بازخورد را به اشتراک بگذارید
توجه داشته باشید که پیشنهاد انتخاب URL API در حال بحث و توسعه فعال است و ممکن است تغییر کند.
ما مشتاقیم نظرات شما را در مورد Select URL API بشنویم.
- پیشنهاد : پیشنهاد تفصیلی را بررسی کنید.
- بحث : به بحث در حال انجام بپیوندید تا سوال بپرسید و بینش خود را به اشتراک بگذارید.
در جریان باشید
- فهرست پستی : برای آخرین بهروزرسانیها و اطلاعیههای مربوط به انتخاب URL و APIهای ذخیرهسازی مشترک، در فهرست پستی ما مشترک شوید.
به کمک نیاز دارید؟
- پشتیبانی برنامه نویس : با سایر توسعه دهندگان ارتباط برقرار کنید و در مخزن پشتیبانی برنامه نویس Privacy Sandbox پاسخ سوالات خود را دریافت کنید.